<template>
  <div id="app">
    <!-- 布局 -->
    <a-config-provider :locale="locale">
      <a-layout id="components-layout" :style="{height:'100%'}">
        <a-layout-sider v-model="collapsed" :trigger="null" collapsible >
          <!-- 菜单栏 -->
          <c-menu-item :title="title"></c-menu-item>
        </a-layout-sider>
        <!-- 右边 -->
        <a-layout>
          <!-- 顶部 -->
          <a-layout-header style="background: #fff; padding: 0">
            <a-row>
              <a-col :span="1">
                <a-icon
                  class="trigger"
                  :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                  @click="() => (collapsed = !collapsed)"
                />
              </a-col>
              <a-col :span="22" :style="{padding: '20px 0px'}">
                <a-breadcrumb>
                  <a-breadcrumb-item href="">
                    <a-icon type="home" />
                  </a-breadcrumb-item>
                  <a-breadcrumb-item href="">
                    <span>首页</span>
                  </a-breadcrumb-item>
                </a-breadcrumb>
              </a-col>
              <a-col :span="1">
                <template>
                  <div>
                    <span style="margin-right:24px">
                      <a-badge :count="1"><a-avatar shape="square" icon="user"/></a-badge>
                    </span>
                  </div>
                </template>
              </a-col>
            </a-row>
          </a-layout-header>
          <!-- 中间内容 -->
          <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
            <router-view/>
          </a-layout-content>
          <!-- 脚部 -->
          <c-footer></c-footer>
        </a-layout>
      </a-layout>
    </a-config-provider>
  </div>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import CMenuItem from '@/components/MenuItem'
import CFooter from '@/components/Footer'
export default {
  name: 'App',
  data () {
    return {
      title: '菜单',
      collapsed: false,
      locale: zhCN
    }
  },
  components: {
    CMenuItem,
    CFooter
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  color: #2c3e50;
  height: 100%;
  /*margin-top: 60px;*/
}

#components-layout .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout .trigger:hover {
  color: #1890ff;
}

</style>
